<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>演示注册, 使用ajax技术</title>
</head>
<body>
    <form action="#" method="post" id="formTemp">
       用户名: <input id="userName" type="text" name="userName"> <span id="tishi" style="color: red"></span> <br>
       密码: <input type="password" name="password"><br>
      <input type="button" value="提交" onclick="cl()">
    </form>

<script type="text/javascript">
  /**
   * 点击提交按钮触发这个方法, 先使用ajax验证用户名是否重复
   * 不重复提交表单, 用户名如果重复给出提示信息
   */
  function cl() {
      //1. 获取用户名输入框的值
      var userName = document.getElementById("userName").value;

      //2. 验证用户名输入框的值是否为空, 如果为空给出提示
      if (userName != null && userName != "") {
          //3. 声明ajax对象
          var xmlHttp;
          //4. 判断当前浏览器类型
          if (window.XMLHttpRequest){
              //如果是火狐或者谷歌浏览器, 创建火狐, 谷歌浏览器的ajax对象
              xmlHttp = new XMLHttpRequest();
          } else {
              //如果是IE, 创建IE浏览器的ajax对象
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //5. 创建并设置监听器
          xmlHttp.onreadystatechange = function() {
              //6. 接收响应编码并判断是否成功
              if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取返回的文本数据
                    var result = xmlHttp.responseText;
                    //如果用户名不重复返回1, 如果用户名重复返回0
                    if (result == "1") {
                        alert("用户名不重复表单提交");
                        //var form = document.getElementById("formTemp");
                        //form.submit();
                    } else {
                        //获取span元素
                        var span = document.getElementById("tishi");
                        span.innerText = "用户名重复, 请从新填写用户名!";
                    }
              } else {
                  return;
              }
          }

          //8. 设置ajax请求类型, 请求地址
          xmlHttp.open("POST", "/test");
          //9. 设置ajax请求头
          xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          //10. 发送ajax请求
          xmlHttp.send("userName=" + userName);
      } else {
        alert("请输入用户名, 用户名不能为空!");
      }
  }
</script>
</body>
</html>